<template>
  <div id="insertEarlyStage">
    <div class="boxItem">
      <div class="boxItem_title">
        <span class="tit">测绘单位信息</span>
      </div>
      <div class="boxItem_content">
        <div class="boxItem_content_row">
          <div class="boxItem_content_row_item">
            <p>前期测绘单位：</p>
            <p>{{companyName}}</p>
          </div>
          <div class="boxItem_content_row_item">
            <p>前期测绘单位开始时间：</p>
            <p>2018年10月01日</p>
          </div>
        </div>
        <div class="boxItem_content_row">
          <div class="boxItem_content_row_item">
            <p>前期测绘负责人：</p>
            <el-select v-model="fuzerenCehui" placeholder="请选择">
              <el-option
                v-for="item in fuzerenCehuiList"
                :key="item.userId"
                :label="item.name"
                :value="item.userId"
              ></el-option>
            </el-select>
          </div>
          <div class="boxItem_content_row_item">
            <p>前期测绘技术负责人：</p>
            <el-select v-model="fuzerenCehuiJishu" placeholder="请选择">
              <el-option
                v-for="item in fuzerenCehuiJishuList"
                :key="item.userId"
                :label="item.name"
                :value="item.userId"
              ></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <div class="boxItem">
      <div class="boxItem_title">
        <span class="tit">测绘单位信息</span>
      </div>
      <div class="boxItem_content">
        <div class="boxItem_content_row">
          <div class="boxItem_content_row_item uploadDownLoadBox_item">
            <p>前期测绘成果模版</p>
            <el-button @click="downLoad">下载</el-button>
          </div>
        </div>
        <div class="boxItem_content_row">
          <div class="boxItem_content_row_item uploadDownLoadBox_item">
            <p>前期测绘成果</p>
            <div class="upLoadImg">
              <el-button>{{uploadText}}</el-button>
              <span>{{fileData.fileName}}</span>
              <input accept=".zip, .rar" type="file" @change="changeFile" />
            </div>
          </div>
        </div>
        <div class="boxItem_content_row button_box">
          <el-button class="button_box_item" :disabled="noUpload" v-loading.fullscreen.lock="fullscreenLoading" type="primary" @click="submit">提交</el-button>
          <el-button class="button_box_item">取消</el-button>
        </div>
      </div>
    </div>
    <el-dialog
      title="文件错误"
      :visible.sync="errorBoxFlag"
      :before-close="handleClose"
      class="errorBox"
    >
      <div class="showTableBox">
        <div class="piankuaixinxi">
          <div class="title1">片块信息</div>
          <el-table height="250" :data="pianKuai" border style="width: 100%">
            <el-table-column prop="landName" label="片块名称"></el-table-column>
            <el-table-column prop="landBaseInfoResult" label="片块基本信息" width="250px;"></el-table-column>
            <el-table-column prop="geomResult" label="片块多面"></el-table-column>
            <el-table-column prop="statusMapResult" label="现状图"></el-table-column>
          </el-table>
          <div class="title">项目信息</div>
          <el-table height="100" :data="xiangMu" border style="width: 100%">
            <el-table-column prop="date" label="项目名称"></el-table-column>
            <el-table-column prop="date" label="权籍变更区县核实报告"></el-table-column>
            <el-table-column prop="date" label="相关证明材料"></el-table-column>
            <el-table-column prop="date" label="项目技术设计书"></el-table-column>
            <el-table-column prop="date" label="项目技术总结书"></el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="errorBoxFlag = false">取 消</el-button>
        <el-button type="primary" @click="errorBoxFlag = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from "@/api/table";
import { getMappingOrganization, submit } from "@/api/siteSurveyEarlyStage";
import { upImg } from "@/api/upImg";

export default {
  data() {
    return {
      noUpload:false,
      fullscreenLoading:false,
      pianKuai:[], //片块信息
      xiangMu:[], //项目信息
      errorBoxFlag: false, //上传文件有误弹框控制
      companyName: "", //公司名称
      mainId: "", //公司ID
      fuzerenCehui: "", //测绘负责人
      fuzerenCehuiJishu: "", //测绘技术负责人
      fuzerenCehuiList: [], //测绘负责人数组
      fuzerenCehuiJishuList: [], //测绘负责人数组
      uploadText: "上传",
      fileData: {
        fileName: "",
        fileUrl: "",
        id: ""
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    //关闭弹框
    handleClose() {
      this.errorBoxFlag = false;
    },
    //真实提交
    submit() {
      this.fullscreenLoading=true
      var obj = {
        projectId: 40,
        zipFileId: 478,
        enterpriseId: 1,
        organizationLeaderId: 4,
        technologyLeaderId: 3,
        startTime: "2019-02-10 19:09:40",
        finishTime: "2019-08-10 19:09:40"
      };
      // {
      //   "projectId": 27,
      //   "zipFileId": this.fileData.id,
      //   "enterpriseId": this.mainId,
      //   "organizationLeaderId": this.fuzerenCehui,
      //   "technologyLeaderId": this.fuzerenCehuiJishu,
      // }
      submit(obj).then(res => {
        
        console.log(res);
        this.errorBoxFlag = true;
        this.pianKuai=res.data.landFileResult
        // this.xiangMu=res.data.
        if (res.code == 2000) {
          this.errorBoxFlag = true;
        }
        this.fullscreenLoading=false
      });
    },
    //下载本地模板
    downLoad() {
      console.log(process.env.VUE_APP_BASE_API);
      // window.open("http://192.168.2.75/src/assets/maeCehui.zip");
      // window.open("../../../assets/maeCehui.zip");
      window.location.href = "http://192.168.2.75:8546/assets/maeCehui.zip";
    },
    //上传图片
    changeFile(file) {
      this.noUpload=true
      this.uploadText = "上传中..";
      upImg(file).then(res => {
        console.log(res);
        this.fileData.fileName = res.data.fileName;
        this.fileData.fileUrl = res.data.filePath;
        this.fileData.id = res.data.id;
        this.uploadText = "上传";
        this.noUpload=false
      });
    },
    getData() {
      var formData = new FormData();
      formData.append("projectId", 30);
      var obj = {
        projectId: 27
      };
      getMappingOrganization(obj).then(res => {
        if (res.data.appUserDtoList != null) {
          this.fuzerenCehuiList = res.data.appUserDtoList;
          this.fuzerenCehuiJishuList = res.data.appUserDtoList;
          this.mainId = res.data.enterprise.id;
          this.companyName = res.data.enterprise.name;
        }
        console.log(res);
      });
    }
  }
};
</script>
<style scoped>
#insertEarlyStage {
  padding: 30px;
  box-sizing: border-box;
}
.boxItem {
  width: 100%;
  background-color: #fff;
}
.boxItem_title {
  width: 100%;
  background: #f8f8f8;
  height: 50px;
  border: 1px solid #efefef;
  overflow: hidden;
  color: #333;
  font-size: 18px;
  font-weight: bold;
  text-indent: 20px;
  line-height: 50px;
}
.boxItem_content {
  width: 100%;
  border: 1px solid #ebebeb;
  border-top: none;
  padding: 30px;
  padding-top: 0;
  box-sizing: border-box;
}
.boxItem_content_row {
  display: flex;
  align-items: center;
}
.boxItem_content_row_item {
  display: flex;
  align-items: center;
}
.boxItem_content_row_item {
  margin-right: 30px;
}
.boxItem_content_row_item p {
  font-size: 14px;
  line-height: 36px;
}
.boxItem_content_row_item p:first-child {
  color: #444;
  font-weight: bold;
}
.boxItem_content_row_item p:last-child {
  color: #666;
}
.uploadDownLoadBox_item p {
  width: 140px;
}
.button_box {
  margin-top: 30px;
}
.button_box_item {
  margin-right: 10px;
}
.errorBox .el-dialog {
  width: 800px;
}
.piankuaixinxi .title {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 16px;
  line-height: 50px;
  border: 1px solid #EBEEF5;
  border-bottom: none;
  border-top: none;
}
.piankuaixinxi .title1 {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 16px;
  line-height: 50px;
  border: 1px solid #EBEEF5;
  border-bottom: none;
}
</style>
 